/* eslint-disable no-unused-vars */

<template>
  <div class="swiper_demo_wrap commom_page_bg">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in swiperData"
             :key="index"
             class="swiper-slide">{{ item.value }} </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import myUtils from '@/utils/myUtils'
export default {
  components: {

  },
  props: {

  },
  data () {
    return {
      refreshTimer: '',
      swiperData: []
    }
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {
    // 发请求
    this.getData()
    // 随机颜色
    this.randomColor()
  },
  methods: {
    initSwiper () {
      // eslint-disable-next-line no-unused-vars
      this.mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        direction: 'vertical', // 垂直切换选项
        // loop: true, // 开启循环
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true // 修改swiper的父元素时，自动初始化swiper
      })
    },
    getRandomNum () { // 获取0到3的随机数
      return parseInt(Math.random() * 3)
    },
    randomColor () {
      this.$nextTick(() => {
        var Slide = document.querySelectorAll('.swiper-slide')
        for (let i = 0; i < Slide.length; i++) {
          Slide[i].style.backgroundColor = myUtils.getRandomColor()
        }
      })
    },
    refreshData: function () { //  每30s刷新当前页的数据
      clearInterval(this.refreshTimer)
      this.refreshTimer = setInterval(() => {
        this.getData()
      }, 30000)
    },
    getData () {
      this.$store.dispatch('getSwiperData', {}).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.swiperData = []
          this.swiperData = res.list
          console.log(new Date())
          // console.log(this.$dateTime.getLocalTime())
          this.randomColor() // 设置随机颜色
          this.initSwiper() // 初始化swiper
          this.refreshData() // 定时刷新数据
        }
      }).catch(err => {
        clearInterval(this.refreshTimer)
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.swiper_demo_wrap {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 84px);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: url(../../../static/img/all-bg.jpg) no-repeat;
  background-size: 100% 100%;
}
.classRed {
  background: red;
}
.classBlue {
  background: blue;
}
.classGreen {
  background: green;
}
.swiper-container {
  width: 300px;
  height: 100px;
  overflow: hidden;
  margin: 100px auto;
  background: #f5f5f5;
  .swiper-slide {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }
}
</style>
